import React, { FC } from 'react'
import { Avatar, IconOftenMt, IconTableCheckbox, ItemLabelWrap } from '../../../../../../components'
import { IconNameMask } from './style'
import { useMccStore } from '@/pages/manager/store'
import shallow from 'zustand/shallow'
import { DcsModel } from '@/api/manager/dcs/interface'
import { useActionButtonsStore } from '../../../../actionButtons/store'

export const ItemLabel: FC<DcsModel> = (props) => {
	const { mcc, status, dcs } = props
	const isUpMtPoll = useMccStore((state) => state.curPage === 'upload')
	const hasActions = useActionButtonsStore((state) => state.screenList.length > 0)
	const canShowCheckbox = isUpMtPoll ? hasActions && mcc.confLevel === 2 : hasActions
	const iconflag = useActionButtonsStore((state) => {
		const actions = state.screenList
		const flag = actions.includes('hangUp') || actions.includes('delete') // 操作类型
		return flag
	})
	const { isSuperMeeting } = useMccStore((state) => ({ isSuperMeeting: state.mccInfo.superMtNum === 1 }), shallow)
	return (
		<ItemLabelWrap
			nestingLevel={0}
			isOnline={mcc.status.isOnline}
			isVip={false}
			isMeeting={false}
			isNameBlue={mcc.status.isManager || mcc.status.isDoubleFlow}
		>
			{canShowCheckbox && (
				<IconTableCheckbox
					className="icon-checked"
					checked={status.isChecked}
					canChecked={isSuperMeeting ? mcc.isMt && mcc.status.isInteractive : true}
					flag={iconflag}
				/>
			)}
			<div className="avatar">
				<Avatar value={mcc} />
				{mcc.status.isOftenMt && <IconOftenMt className="icon-often" />}
				{dcs.isApply && <IconNameMask className="icon-name-mask" />}
			</div>
			<div className="name" title={mcc.name}>
				<pre data-mtid={mcc.mtKey}>{mcc.name}</pre>
			</div>
		</ItemLabelWrap>
	)
}
